<template>
    <div :class="`choose-header ${mode} ${styleMode}`">
        <div class="choose-goods-detail">
            <div class="img-content">
                <img class="goods-img" v-lazy="imgSrc" />
            </div>
            <div class="goods-detail-info">
                <div class="name-select">
                    <div class="goods-name title-color">{{ name || '' }}</div>
                    <div class="goods-selected-info" v-if="isMulit">已选：{{ selectStr }}</div>
                </div>
                <!-- <div v-if="intro" class="goods-intro">
                    <MenuTagItem :name="intro" :mode="mode" :theme="theme" :styleMode="styleMode" />
                </div>
                <template v-if="tradeNames && tradeNames.length > 0">
                    <MenuTagItem v-for="(item, index) in tradeNames" :key="index + 'trade'" :name="item" :mode="mode" :theme="theme" :styleMode="styleMode" />
                </template> -->
                <div class="goods-price" :style="fontColor">¥{{price / 100}}</div>
            </div>
        </div>
        <MiniIcon class="title-close" name="close" theme="#7D7D83" is-stop @click="closeAction" />
    </div>
</template>

<script>

import Vue from 'vue';
import { Lazyload } from 'vant';
import { TechIcon, MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
import { MenuTagItem } from '@components/biz';

// 使用懒加载
Vue.use(Lazyload);
export default {
    name: 'ChooseHeader', // 选择头部
    mixins: [ModeMixin],
    props: {
        imgSrc: {
            type: String,
            default: '',
        },
        name: String,
        price: [Number, String],
        selectStr: {
            type: String,
            default: '未选择',
        },
        isMulit: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        TechIcon,
        MiniIcon,
        MenuTagItem,
    },
    methods: {
        closeAction() {
            this.$emit('close');
        },
    },
};
</script>

<style lang="less">
.choose-header {
    .flex();
    position: relative;
    justify-content: space-between;
    .choose-goods-detail {
        width: 100%;
        .flex();
        .m(@shop-gap-md);
        .img-content {
            border: @border;
            width: 112px;
            height: 112px;
            .m-r(@gap);
            background-color: @product-bg-color;
            .flex-column-center();
        }
        .goods-img {
            width: 100%;
        }
        .goods-detail-info {
            height: 114px;
            flex: 1;
            .flex-column();
            // align-items: ;
            justify-content: space-between;
            .goods-selected-info {
                font-size: @shop-font-size-sm;
                .m-t(@shop-gap);
                color: @tip-color;
            }
            .goods-name {
                height: 68px;
                font-size: @font-size-md;
                max-width: 85%;
                font-weight: @font-weight-bold;
                .text-overflow-line(3);
            }
            .goods-price {
                .font-size-md();
                font-family: @font-family-number;
                font-weight: @font-weight-bold;
                color: @red;
            }
        }
    }
    .title-close {
        font-weight: normal;
        color: @gray;
        position: absolute;
        right: @gap-md;
        top: @gap-md;
        opacity: 0.7;
    }
}
</style>
